<template>
  <view class="container">
   
  
      <!-- 上传商家门头照片 -->
      <view class="choo_content">
        <view class="bill">
      
          <view v-for="(item,index) in clients" :key="index">
            <view class="uncleared">
              <view class="uncle">
                未结清账单{{index}}
              </view>
              <view class="dele" @click="clients.splice(index,1)">
                删除</view>
            </view>
            <view class="cleItem">
              <view class="name">
                账单金额</view>
              <input type="text" placeholder="请输入账单金额" v-model="item.Money" />
            </view>
            <view class="cleItem">
              <view class="name">备注
              </view> <input type="text" placeholder="请输入账单备注信息" v-model="item.fInfo" />
            </view>
            <view class="cle_content">
              <view class="title">
                账单图片
              </view>
              <u-upload :header="header" :max-count="1" :action="action" :auto-upload="true"
                :ref="'upload' +index">
              </u-upload>
            </view>
          </view>
          <view class="addtitle" @click="addClient">+
            添加未结清账单</view>
        </view>
  
     
        <button type="primary" @click="handleSave">保存</button>
      </view>
  
    </view>
  </template>
</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      info: {
        InOut: 1,
        iType: 2,
        CarId: 0,
        CarNo: '',
        Info: ''
      },
	   action: this.urlimg + 'api/Upfile/PostImgFile',
	  clients: [],
	  id: 0,
      formdata: [],
      list: []
    }
  },
  onLoad(e) {
    this.id = Number(e.id)
     this.addClient()
  },
  methods: {
    handleSave() {
		
	 
      for (let i in this.clients) {
        let dom = this.$refs['upload' + i][0].lists
        if (!dom) {
          uni.showToast({
            title: '请添加账单照片',
            duration: 2000,
            icon: 'none'
          })
          return false
        }
        let img = dom.map(x => x.response.Value[0].sFileUrl).join(',')
        this.clients[i].Pic = img
      }
      this.list = this.clients
	   
     this.$axios('api/MrkNoPayWill/AddListDetail', 'post', { value: this.list }).then(res => {
     	if (!res.Success) {
     	  uni.showToast({
     	    title: '提交失败：'+res.Message,
     	    icon: 'none',
     	    duration: 2000
     	  })
     	  return false
     	}
		 this.$api.handleToUrl('提交成功', '/pages/my_customer/PayWill?id='+this.id)
      // this.$api.handleBack('添加成功')
      //  getApp().globalData.addCusGoodLi=null
     })
    },
	addClient() {
	  let info = {
	    MrkId: this.id,
	    MrkName: '',
	    Money: '',
	    Pic: '',
	    fInfo: '',
		WillType:2
		
	  }
	  this.clients.push(info)
	}
  },
  onShow() {
    if (getApp().globalData.addCusGoodLi) {
      let orders = getApp().globalData.addCusGoodLi
      orders.forEach(
        x =>
          (x.details = [
            { label: '商品价格', value: x.fPrice }
          ])
      )
      this.formdata = orders
    }
  },
  created() {
 
  }
}
</script>

<style lang="scss" scoped>
.app-draw-add {
  padding-bottom: 70rpx;
  .draw-item {
    .title {
      font-size: 30rpx;
      color: #7f7f7f;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }
  }
  .draw-add {
    color: #007aff;
    font-size: 30rpx;
    padding: 32rpx;
    text-align: center;
  }
  .draw-mark {
    display: flex;
    padding: 0 32rpx;
    u-input {
      flex: 1;
    }
  }
  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
}
</style>

<style lang="scss" scoped>
.container {
  // background-color: #fff;
  // min-height: 100vh;
  padding-bottom: 120rpx;
  position: relative;
  padding: 30rpx;
  .header {
    color: #0297d7;
    font-weight: 700;
    margin: 0 0 20rpx 45rpx;
    font-size: 26rpx;
  }

  .content {
    background-color: #fff;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    input {
      opacity: 0.9;
      font-size: 24rpx;
      width: 100%;
      height: 100%;
    }
    .flexbox {
      display: flex;
      align-items: center;

      .uni-input {
        padding: 20rpx;
        text-align: center;
        margin-right: 20rpx;
      }
    }
  }

  //上传图片区域
  .choo_content {
    .choo_box {
      margin: 15rpx 0rpx 10rpx;
      width: 180rpx;
      height: 180rpx;
      border-radius: 6rpx;
      border: 2rpx dashed #c0c0c0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text {
        text-align: center;
      }

      .append {
        font-size: 60rpx;
        margin-top: -30rpx;
      }

      .choice {
        font-size: 26rpx;
      }
    }
  }

  .bill {
    .addtitle {
      background-color: #fff;
      color: #64a8fe;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
    }

    .uncleared {
      background-color: #f4fcff;
      color: #999;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx;
    }

    .cleItem {
      display: flex;
      background-color: #fff;
      margin-bottom: 2rpx;
      padding: 10rpx 30rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      font-size: 26rpx;

      .name {
        width: 26%;
      }

      input {
        font-size: 25rpx;
      }
    }

    .cle_content {
      background-color: #fff;
      padding: 35rpx 30rpx 10rpx;
      .title {
        font-size: 26rpx;
      }
      .choo_box {
        background-color: #f4f5f6;
        border: 0;
        margin: 0;
        margin: 40rpx 10rpx 0rpx;
        .text {
        }
      }
    }
  }
  .details {
    .detaItem {
      background-color: #fff;
      border-radius: 10rpx;
      margin: 30rpx 0;
      height: 240rpx;
      padding: 20rpx;
      box-sizing: border-box;
      .title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
      }
      textarea {
        width: 100%;
        height: 160rpx;
        font-size: 28rpx;
      }
    }
  }
  .seller {
    width: 110px;
    height: 110px;
    line-height: 110px;
    color: #606266;
    font-size: 26px;
    margin: 10rpx;
    background: #f4f5f6;
    text-align: center;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .pickerLog {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 99;
    background-color: rgba(245, 245, 245, 1);
    font-size: 28rpx;
    .answer {
      background-color: #fff;
    }
    .regular {
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 2rpx solid #eee;
    }
    .colr {
      color: #bdbdbd;
    }
    .prno {
      height: 100rpx;
      line-height: 100rpx;
      background-color: #fff;
      margin-top: 10rpx;
    }
  }
  .active {
    height: 390rpx;
    transition: 0.5s;
  }
  .bg {
    transition-delay: 0.3s;
    transition: 0.5s;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    height: calc(100% - 390rpx);
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
}
picker {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
}
.seller {
  background-color: #fff;
}
.boxFlex {
  display: flex;
  justify-content: space-between;
  color: #888;
  padding-right: 20rpx;
  width: 100%;
  font-size: 24rpx;
}
</style>